<template>
  <div class="shop_tabber">
      <span class="iconfont" @click="spgcartList">&#xe682;</span><span class="horn"  v-show="show"><span>{{spgCarts}}</span></span>
      <span class="text" v-show="!show">购物车是空的</span>
      <span class="text" v-show="show">总计：<span>￥{{price}}</span></span>
      <span class="smt" @click="toPage">去结算</span>
  </div>
  <Toast v-if="data.toastShow" :toastText='data.toastText'/>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
import { bus } from '../../assets/js/public.js'
import { useRoute, useRouter } from 'vue-router'
import Toast, { userToastEffect } from '../../components/toast/toast.vue'

const datas = reactive({
  spgCarts: 0,
  price: 0,
  show: false
})

export default {
  name: 'Tabber',
  emits: ['spgcartList'],
  components: {
    Toast
  },
  setup (props, content) {
    const { data, toastShow } = userToastEffect()

    const route = useRoute()
    const router = useRouter()
    const shopId = route.params.id
    // 从本地存储取数据
    cart()
    // 监听兄弟组件触发的事件
    onAddRed('busMain')
    onAddRed('busSpgcart')
    // 向父组件触发事件
    function spgcartList () {
      content.emit('spgcartList')
    }
    function toPage () {
      if (localStorage.getItem(`ls${shopId}`) === null) { toastShow('您在本商店还没购买任何物品') } else {
        router.push({ name: 'Order', params: { id: shopId } })
      }
    }
    const { spgCarts, price, show } = toRefs(datas)
    return { spgCarts, price, show, spgcartList, toPage, data }
  }
}

// 从本地存储取数据实现逻辑
function cart () {
  let lsSum = 0
  let lsPrice = 0
  for (const i in localStorage) {
    if (i.includes('ls')) {
      const ls = JSON.parse(localStorage[i])
      for (const i of ls) {
        lsSum = lsSum + i.sum

        lsPrice = lsPrice + i.sum * i.price
      }
    }
  }
  datas.spgCarts = lsSum
  datas.price = lsPrice
}

// 监听兄弟组件要执行的逻辑
function onAddRed (onType) {
  bus.off(onType)
  bus.on(onType, ({ spgCart, price }) => {
    datas.spgCarts = datas.spgCarts + spgCart
    datas.price = Number((datas.price + price).toFixed(2))
    datas.spgCarts === 0 ? datas.show = false : datas.show = true
  })
}
</script>

<style lang='scss' scoped>
.shop_tabber{
    width: 100%;
    height: .49rem;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #ffffff;
    box-shadow: 0 -1px 1px 0 #F1F1F1;
    .iconfont{
        font-size: .28rem;
        margin: 0 .24rem;
        line-height: .49rem;
        color: #4FB0F9;
    }
    .text{
        margin-left: .08rem;
        vertical-align: .05rem;
        span{
            font-size: 18px;
            color: #E93B3B;
             vertical-align: -.02rem;
        }
    }
    .smt{
        position: absolute;
        right: 0;
        width: .98rem;
        height: 100%;
        background-color: #4FB0F9;
        text-align: center;
        line-height: .49rem;
        font-size: 14px;
        color: #FFFFFF;
    }
    .horn{
        position: absolute;
        top: .07rem;
        left: .47rem;
        width: .15rem;
        height: .15rem;
        border-radius: 50%;
        color: #FFFFFF;
        background-color: #E93B3B;
        text-align: center;
        span{
          display: block;
          transform: scale(0.8);
          line-height: .15rem;
        }
    }
}
</style>
